import React from "react";

export default class ImagesModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      itineraries: [],
    };
  }

  componentWillMount = () => {
    const { children } = this.props;
    const wrappedChildren = React.Children.map(children, (child) => {
      return React.cloneElement(child, {
        onClick: this.showImage,
        style: Object.assign(child.props.style, { cursor: "pointer" }),
      });
    });
    this.setState({ wrappedChildren });
  };

  showImage = (e) => {
    this.setState({ url: e.target.src, showImage: true });
  };

  render() {
    const { wrappedChildren, url, showImage } = this.state;
    return (
      <div>
        {wrappedChildren}
        {showImage && (
          <div onClick={() => this.setState({ showImage: false })} className="images-modal">
            <img onClick={(e) => e.stopPropagation()} className="modal-content" src={url} />
          </div>
        )}
      </div>
    );
  }
}
